<template>
  <div
    style="
      position: reactive;
      height: 100vh;
      box-sizing: border-box;
      overflow: hidden;
    "
  >
    <div class="wx-mask" v-if="show" @click="show = false">
      <div class="wx-mask-ios"></div>
    </div>
    <div class="box">
      <header>
        <div class="boxone">
          <img src="https://api.cd1a.cn/h5/appli_img/benefitDowload/logo.png" alt="" />
        </div>
        <div class="boxtwo">
          <img src="https://api.cd1a.cn/h5/appli_img/benefitDowload/logo1.png" alt="" />
        </div>
        <div class="boxthree pinfang">充电 安全 方便 体验</div>
      </header>
      <aside>
        <ul class="asideOne pinfang">
          <li>扫码快捷充电，充电网点定位导航</li>
          <li>创建一流、方便、快捷的用户体验</li>
          <li>app享支付宝方式，让你多样支付</li>
          <li>免费领取APP专属碳积分，专属优惠券福利</li>
        </ul>
        <!--  <img :src="require('@/assets/img/qode1.png')" alt="" width="200px;height:200px;"> -->
      </aside>
      <footer class="pinfang">
        <div class="footerone" @click="btnFn">立即下载</div>

        <div class="footertwo">更有app免费专属福利等你来拿</div>
        <ul>
          <li>陕西天天出行科技有限公司</li>
          <li>电话：400-688-8919</li>
        </ul>
      </footer>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false, // 引导图片的展示隐藏
      isAndroid: false, // 安卓
      isIOS: false, // ios
    };
  },
  created() {
    // 获取活动详情
    // 判断是微信还是ios
    this.isAndroid =
      navigator.userAgent.indexOf("Android") > -1 ||
      navigator.userAgent.indexOf("Linux") > -1;
    this.isIOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
  },
  mounted() {
    let ua = navigator.userAgent.toLowerCase();
    // 判断是不是微信环境
    if (ua.match(/MicroMessenger/i) == "micromessenger") {
    } else {
      if (this.isAndroid == true) {
        window.location.href =
          "http://adminapi.cd1a.cn/public/index.php/auth/Login/client_donw_Apk";
      } else {
        window.location.href =
          "https://itunes.apple.com/cn/app/m-help/id1414786046?mt=8";
      }
    }
  },
  methods: {
    // 点击下载按钮
    btnFn() {
      let ua = navigator.userAgent.toLowerCase();
       // 判读是否在微信环境
      if (ua.match(/MicroMessenger/i) == "micromessenger") {
        this.show = true;
      } else {
        if (this.isAndroid == true) {     
          window.location.href =
            "http://adminapi.cd1a.cn/public/index.php/auth/Login/client_donw_Apk";
        } else {
          window.location.href =
            "https://itunes.apple.com/cn/app/m-help/id1414786046?mt=8";
        }
      }
    },
  },
};
</script>

<style scoped>
.box {
  box-sizing: border-box;
  padding: 1.4rem 0 2.7375rem 0;
  width: 100%;
  height: 100vh;
  background: url('https://api.cd1a.cn/h5/appli_img/benefitDowload/flbg.png') no-repeat;
  background-size: 100% 100%;
}
.wx-mask {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 3;
  top: 0;
  background: #000;
  opacity: 0.8;
}
.wx-mask-ios {
  height: 100%;
  padding: 0;
  background: url('https://api.cd1a.cn/h5/appli_img/benefitDowload/mask-ios.png') right no-repeat;
  background-size: auto 100%;
}

.box_img {
  background: #000;
  width: 100%;
  height: 100%;
  z-index: 3;
  opacity: 0.8;
}
header .boxone {
  width: 1.875rem;
  height: 1.875rem;
  margin: 0 auto 0;
}
header .boxone img {
  width: 100%;
  height: 100;
}
header .boxtwo {
  width: 3.0125rem;
  height: 1.02rem;
  margin: 0.4rem auto 0;
}
header .boxtwo img {
  width: 100%;
  height: 1.02rem;
}
header .boxthree {
  width: 60%;
  text-align: center;
  margin: 0.375rem auto 0;
  color: #ffffff;
  font-size: 0.375rem;
  font-weight: 500;
}
aside .asideOne {
  width: 70%;
  font-size: 0.325rem;
  color: #ffffff;
  font-weight: 400;
  line-height: 0.9rem;
  text-align: center;
  margin: 0.95rem auto 0;
}
footer .footerone {
  width: 5.7625rem;
  height: 1.1125rem;
  border-width: 1px;
  border-color: #fff;
  border-style: solid;
  color: #ffffff;
  border-radius: 10px;
  font-weight: 500;
  font-size: 0.375rem;
  line-height: 1.1125rem;
  text-align: center;
  margin: 1.375rem auto 0;
}
footer .footertwo {
  width: 65%;
  color: #ffffff;
  font-weight: 500;
  font-size: 0.275rem;
  line-height: 0.9rem;
  text-align: center;
  margin: 0.325rem auto 0;
  letter-spacing: 5px;
}
footer ul {
  width: 40%;
  font-size: 0.275rem;
  font-weight: 300;
  line-height: 0.55rem;
  opacity: 0.4;
  color: #fff;
  text-align: center;
  margin: 1rem auto 0;
}
</style>